<template>
  <a-card title="路由列表">
    <a-table
      :dataSource="dataSource"
      :columns="columns"
      bordered
      :pagination="false"
    >
      <template #bodyCell="{ column, record, index }">
        <template v-if="column.key === 'index'">
          {{ index + 1 }}
        </template>
        <template v-else-if="column.key === 'menuType'">
          {{ record.menuType ? "菜单" : "内容" }}
        </template>
        <template v-else-if="column.key === 'type'">
          <a-tag :color="record.type ? '#f50' : '#108ee9'">
            {{ record.type ? "外链" : "内部跳转" }}
          </a-tag>
        </template>
        <template v-else-if="column.key === 'action'">
          <a @click="handelEdit(record)">编辑</a>
          <a-divider type="vertical" />
          <a @click="handelDelete(record)" style="color: red">删除</a>
        </template>
      </template>
    </a-table>
  </a-card>
</template>


<script setup>
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import { message } from "ant-design-vue";
import { MenuOutlined } from "@ant-design/icons-vue";
import { getRouterList, deleteRouter } from "@/api/router";
const router = useRouter();
const columns = [
  {
    title: "序号",
    dataIndex: "index",
    key: "index",
  },
  {
    title: "路由名称",
    dataIndex: "title",
    key: "title",
  },
  {
    title: "菜单类型",
    dataIndex: "menuType",
    key: "menuType",
  },
  {
    title: "type",
    dataIndex: "type",
    key: "type",
  },
  {
    title: "path",
    dataIndex: "path",
    key: "path",
  },
  {
    title: "模块",
    dataIndex: "component",
    key: "component",
  },
  {
    title: "操作",
    key: "action",
  },
];

const dataSource = ref([]);

const getList = async () => {
  const { data, success } = await getRouterList();
  if (!success) return;
  dataSource.value = data;
};
// 删除
const handelDelete = async (record) => {
  const { msg, success } = await deleteRouter({ _id: record._id });
  if (success) {
    message.success(msg);
    getList();
  } else {
    message.error(msg);
  }
};

// 编辑
const handelEdit = (record) => {
  router.push({
    path: "/router-manage/add",
    query: {
      _id: record._id,
    },
  });
};

onMounted(() => {
  getList();
});
</script>
